<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">银行卡配置</span></strong>
            </div>
            <div class="body-content">
                <!-- 查询条件 -->
                <el-form :inline="true" size='small'>
                    <el-form-item>
                        选择银行:
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="bankId" size='small' @change="selectChange" placeholder="选择银行" style="width: 140px">
                            <el-option v-for="item in banksData" :key="item.autoId" :label="item.bankName" :value="item.autoId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!-- 数据表格 -->
                <el-table :data="tableData" border v-loading="listLoading" element-loading-text="拼命加载中">
                    <el-table-column label="序号" width="70">
                        <template slot-scope="scope">
                            <el-popover trigger="click" placement="top">
                                <span>autoId: {{ scope.row.autoId }}</span>
                                <div slot="reference">
                                    {{scope.$index + 1}}
                                </div>
                            </el-popover>
                        </template>                    
                    </el-table-column>
                    <el-table-column prop="cardName" label="卡名称" />
                    <el-table-column prop="cardId51" label="51卡ID" />
                    <el-table-column label="图片链接" width="150">
                        <template slot-scope="scope">
                            <img :src="scope.row.imageUrl" alt="" style="width: 80px;height: 50px;margin: 0 auto;"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="跳转链接" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>跳转链接: {{ scope.row.cardLink }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">查看</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="addeditDailog('edit',scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='closeOnClickModal' :visible.sync="dialogFormVisible" width="45%" @close="closeDailog" @open="openDailog">
                    <el-form>
                        <el-form-item label="51卡ID:" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.cardId51" style="width:240px;" size="small" />
                            <el-button type="primary" :loading="searchIdloading" size="small" @click="searchBy51id">查询</el-button>
                        </el-form-item>
                        <el-form-item label="卡名称:" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.cardName" disabled style="width:300px;" size="small" />
                        </el-form-item>
                        <el-form-item label="图片链接:" :label-width="formLabelWidth">
                            <!-- <el-input v-model="dailogFrom.imageUrl" style="width:370px;" size="small" /> -->
                            <img :src="dailogFrom.imageUrl" alt="" style="width:200px;height:110px;"/>
                        </el-form-item>
                        <el-form-item label="跳转链接:" :label-width="formLabelWidth">
                            <el-input v-model.trim="dailogFrom.cardLink" style="width:300px;" size="small" />
                        </el-form-item>
                        
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>

<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            closeOnClickModal: false,

            banksData: [], // 银行名称列表
            bankId: "", // 银行ID

            tableData: [], // 数据列表
            listLoading: false,

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",

            searchIdloading: false, // 根据51卡ID查询按钮 loading
            dailogFrom: {
                cardId51: "", // 51卡ID
                cardName: "", //卡名称
                imageUrl: "", //图片链接
                cardLink: "" //跳转链接
            }
        };
    },
    watch: {},
    computed: {},
    methods: {
        // 打开弹窗
        openDailog() {
            // 银行名称展示
            const bankName = this.findBankNameByid(this.bankId);
            this.dialogType === "add"
                ? (this.dialogTitle = `新增银行卡(${bankName})`)
                : (this.dialogTitle = `编辑银行卡(${bankName})`);
        },
        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
            } else {
                this.dialogType = "edit";
                this.selectDisabled = true;
                this.dailogFrom = Object.assign({}, rowData);
                // for (const key in rowData) {
                //     this.dailogFrom[key] = rowData[key].toString();
                // }
            }
            this.dialogFormVisible = true;
        },
        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.dailogFrom = {
                cardId51: "", // 51卡ID
                cardName: "", //卡名称
                imageUrl: "", //图片链接
                cardLink: "" //跳转链接
            };
        },

        //获取银行卡对应51卡片详情
        searchBy51id() {
            if (!this.dailogFrom.cardId51) {
                this.$message.error("请输入51卡ID!");
                return false;
            }
            this.searchIdloading = true;
            api.getCardInfo51({
                cardId51: this.dailogFrom.cardId51
            })
                .then(res => {
                    this.searchIdloading = false;
                    const data = res.data;
                    this.dailogFrom.cardName = data.cardName;
                    this.dailogFrom.imageUrl = data.imageUrl;
                })
                .catch(() => {
                    this.searchIdloading = false;
                });
        },

        // 新增/编辑 确定
        confirm() {
            if (!this.dailogFrom.cardName || !this.dailogFrom.imageUrl) {
                this.$message.error("请先根据51卡ID查询!");
                return false;
            }
            if (!this.dailogFrom.cardLink) {
                this.$message.error("请输入跳转链接!");
                return false;
            }
            if (this.dialogType === "add") {
                // 添加银行卡
                this.addBankCardFun();
            } else if (this.dialogType === "edit") {
                // 更新银行卡信息
                this.updateBankCardFun();
            }
        },
        // 下拉框选择事件
        selectChange() {
            // 银行卡列表
            this.cardListRecords();
        },

        //根据银行id 查询银行名称
        findBankNameByid(id) {
            let bankName = "";
            this.banksData.forEach(item => {
                if (item.autoId == id) {
                    bankName = item.bankName;
                    return;
                }
            });
            return bankName;
        },

        // 银行卡列表
        cardListRecords() {
            this.listLoading = true;
            api.getCardListRecords({
                bankId: this.bankId
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.list;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 获取银行名称列表
        getBankNameList() {
            api.bankNameList().then(res => {
                this.banksData = res.data;
                this.bankId = res.data[0].autoId;
                // 银行卡列表
                this.cardListRecords();
            });
        },
        // 添加银行卡
        addBankCardFun() {
            api.addBankCard({
                ...this.dailogFrom,
                bankId: this.bankId
            }).then(() => {
                this.$message.success("新增成功!");
                // 银行卡列表
                this.cardListRecords();
                this.dialogFormVisible = false;
            });
        },
        // 更新银行卡信息
        updateBankCardFun() {
            api.updateBankCard(this.dailogFrom).then(() => {
                this.$message.success("更新成功!");
                // 银行卡列表
                this.cardListRecords();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 获取银行名称列表
        this.getBankNameList();
    }
};
</script>

<style>
</style>
